<template>
    <div class="Comparison">
        <IconTabs
            style="margin-bottom: 12px"
            :sourceData="tabData"
            v-model="tabType"
            @change="handleChange"
        />

        <!-- <div ref="containerRef" style="width: 100%; height: 300px"></div> -->
        <div ref="containerRef" style="height: 300px"></div>

        <el-table :data="source" style="width: 100%" class="customTableClass">
            <el-table-column prop="time" label="日期"> </el-table-column>
            <el-table-column prop="actualValue" :label="'能源实绩' + currentUnit">
                <template slot-scope="{ row }">{{ row.actualValue || '--' }}</template>
            </el-table-column>
            <el-table-column prop="planValue" :label="'能源计划' + currentUnit">
                <template slot-scope="{ row }">{{ row.planValue || '--' }}</template>
            </el-table-column>
            <el-table-column prop="diff" :label="'差值' + currentUnit">
                <template slot-scope="{ row }">{{ row.diff || '--' }}</template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import * as echarts from 'echarts'
    import IconTabs from '@/components/IconTabs'

    export default {
        name: '',
        props: {
            source: Array,
            unit: String,
        },
        components: {
            IconTabs,
        },
        data() {
            return {
                tabIndex: 1,
                currentUnit: '',
                tabType: 'Dosage',
                tabData: [
                    {
                        code: 'Dosage',
                        text: '能耗用量对比',
                        url: require('@/assets/image/actuslConsumption/button-img1.png'),
                    },
                    // {
                    //     code: 'Cost',
                    //     text: '能耗费用对比',
                    //     url: require('@/assets/image/actuslConsumption/button-img2.png'),
                    // },
                ],
            }
        },
        watch: {
            source: {
                handler(newVal) {
                    this._$setChartOptions(newVal)
                },
            },
            unit: {
                handler(newVal) {
                    this.currentUnit = newVal ? `(${newVal})` : ''
                },
                immediate: true,
            },
        },
        created() {},
        async mounted() {
            this.chartHook = undefined
            this.$nextTick(() => {
                this.chartHook = echarts.init(this.$refs.containerRef)

                this._$setChartOptions(this.source)
            })
            window.addEventListener('resize', this._$resizeChart)
        },
        destroyed() {
            window.removeEventListener('resize', this._$resizeChart)
        },
        methods: {
            //查询数据
            getData() {},
            handleChange() {},
            getDosage() {
                this.tabIndex = 1
            },
            getCost() {
                this.tabIndex = 2
            },
            _$resizeChart() {
                this.chartHook?.resize()
            },
            _$setChartOptions(data) {
                if (!this.chartHook) return
                this.chartHook.clear()
                if (data.length == 0) {
                    this.chartHook.showLoading({
                        text: '暂无数据',
                        showSpinner: false,
                        textColor: '#2c5a8f',
                        maskColor: '#001C4A',
                        fontSize: '15px',
                    })
                } else {
                    this.chartHook.hideLoading()
                }

                const xAxisData = []
                const actualData = []
                const planData = []
                data.forEach((item) => {
                    xAxisData.push(item.time)
                    actualData.push(item.actualValue || '--')
                    planData.push(item.planValue || '--')
                })
                const seriesData = [actualData, planData]
                const nameText = { 0: '能源实绩', 1: '能源计划' }
                const generateSeries = seriesData.map((item, index) => {
                    return {
                        name: nameText[index],
                        data: item,
                        type: 'line',
                        symbol: false,
                        showSymbol: true,
                    }
                })
                const option = {
                    color: ['#FFB442FF', '#2B8EFFFF', '#2BECFFFF'],
                    tooltip: {
                        trigger: 'axis',
                    },
                    grid: {
                        top: '12%',
                        left: '2%',
                        right: '2%',
                        bottom: '8%',
                        container: true,
                        containLabel: true,
                    },
                    legend: {
                        right: '2%',
                        textStyle: {
                            color: '#E7F0FFFF',
                        },
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        data: xAxisData,
                        axisLine: {
                            lineStyle: {
                                color: '#B0D7FF66',
                            },
                        },
                        axisLabel: {
                            margin: 12,
                            color: '#D8F0FF99',
                        },
                    },
                    yAxis: {
                        type: 'value',
                        name: this.currentUnit,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#B0D7FF66',
                            },
                        },
                        axisLabel: {
                            fontSize: 13,
                            color: '#D8F0FF99',
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#2c5a8f',
                                type: 'dashed',
                            },
                        },
                    },
                    series: generateSeries,
                }
                this.chartHook.setOption(option)
                requestAnimationFrame(() => this.chartHook?.resize())
            },
        },
    }
</script>

<style lang="scss" scoped>
    .Comparison {
        color: #fff;
        width: 100%;

        .customTableClass {
            margin-top: 10px;
            &::after,
            &::before {
                background-color: transparent !important;
            }
        }

        ::v-deep .el-table {
            background: $table-bg;
            tr {
                background: $table-defalut-tr-bg;
            }
            .el-table__expand-icon {
                color: $table-search-text-color;
            }
            ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
                background: $table-striped-bg !important;
            }
        }
        .table__empty-text {
            color: #909399;
            line-height: 60px;
        }
    }
</style>
